<template>
  <div class="page-school">
    <div class="school_container">
      <div class="header-wrapper ch-simple">
        <h1>院校库</h1>
      </div>
      <div class="yxk-filter">
        <ul class="yxk-fliter-list">
          <li class="yxk-option-con clearfix">
            <div class="list-th">高校所在地：</div>
            <div class="list-td clearfix">
              <span @click="handleFilter(item.value,'region')" :class="['yxk-option', 'js-option', search_form.region == item.value ? 'selected' : '']" v-for="(item,index) in region_list" :key="item.value">{{item.text}}</span>
              
            </div>
          </li>
          <li class="yxk-option-con clearfix">
                <div class="list-th">院校类型：</div>
                <div class="list-td clearfix">
                  <span @click="handleFilter(item.value,'type')" :class="['yxk-option', 'js-option', search_form.type == item.value ? 'selected' : '']" v-for="(item,index) in type_list" :key="item.value">{{item.text}}</span>
                   
                </div>
            </li>
            <li class="yxk-option-con clearfix">
                <div class="list-th">学历层次：</div>
                <div class="list-td clearfix">
                  <span @click="handleFilter(item.value,'hierarchy')" :class="['yxk-option', 'js-option', search_form.hierarchy == item.value ? 'selected' : '']" v-for="(item,index) in hierarchy_list" :key="item.value">{{item.text}}</span>
                    
                </div>
            </li>
        </ul>
      </div>
      <div class="yxk-list">
        <div class="yxk-school-item" v-for="(item,index) in school_list" :key="index">
          <div class="school-logo">
            <img :src="item.ico" alt="">
          </div>
          <div class="school-info">
            <p class="school-info-title">{{ item.name }}</p>
            <p class="school-info-introduction">{{ item.introduction }}</p>
          </div>
          <div class="school-detail">
            <nuxt-link :to="'/school-detail?id=' + item.id">详情</nuxt-link>
          </div>
        </div>
      </div>
      <div class="yxk-footer">
        <Page :total="total" :page-size="pageSize" :current="page" @on-change="handleChangePage" />
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { getCollegePulldown, getSchoolCollege,  } from "~/api/school";
export default {
  data() {
    return {
      region_list:[
        {
          text: "全部",
          value: "all",
        },
      ],
      hierarchy_list:[
        {
          text: "全部",
          value: "all",
        },
      ],
      type_list:[
        {
          text: "全部",
          value: "all",
        },
      ],
      search_form:{
        region:'all',
        hierarchy:'all',
        type:'all',
      },
      school_list: [], //院校
      pageSize: 5,
      page: 1,
      total: 0,
    };
  },
  created() {
    this.initPages();
  },
  mounted() {},
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    ...mapActions(["initNavList"]),
    handleFilter(value,text){
      this.search_form[text] = value;
      this.page = 1;
      this.getSchoolData();
    },
    initPages(){
      this.getSchoolData();
      this.getCollegePulldown();
    },
    //   html剔除富文本标签，留下第一段纯文本
    getSimpleText(html) {
      let re1 = new RegExp("<.+?>", "g"); //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
      let msg = html.replace(re1, ""); //执行替换成空字符
      let msg2 = msg.split("=");
      let msg3 = msg2.filter((i, x) => i != "")[0];
      return msg3;
    },
    //格式化时间
    trimDate(date) {
      if (date) {
        let _date = new Date(date);
        return `${_date.getFullYear()}-${_date.getMonth() +
          1}-${_date.getDate()}`;
      } else {
        return "";
      }
    },
    // 路由跳转
    linkTo(path) {
      this.$router.push({
        path
      });
    },
    //分页处理
    handleChangePage(n) {
      this.page = n;
      this.getSchoolData();
    },
    //获取院校
    async getSchoolData() {
      this.SET_IS_LOADING(true);
      let params = {
        offset: this.pageSize * (this.page - 1),
        limit: this.pageSize,
        sort: "id",
        sortType: "desc",
      };
      Object.keys(this.search_form).map(item=>{
        if(this.search_form[item] != 'all'){
          if(item == 'region'){
            params = {
              ...params,
              schoolProvinceId:this.search_form[item]
            }
          }
          if(item == 'hierarchy'){
            params = {
              ...params,
              schoolEducationLevelId:this.search_form[item]
            }
          }
          if(item == 'type'){
            params = {
              ...params,
              schoolCollegeMajorId:this.search_form[item]
            }
          }
          
        }
      })
      let result = await getSchoolCollege(params);
      if (result && result.data && result.data.code == 200) {
        this.school_list = result.data.data.rows;
        this.total = result.data.data.total;
      } else {
        
      }
      this.SET_IS_LOADING(false);
    },
    //获取下拉选项
    async getCollegePulldown() {
      this.SET_IS_LOADING(true);
      let result = await getCollegePulldown();
      if (result && result.data && result.data.code == 200) {
        let schoolProvinces = result.data.data.schoolProvinces.map(item=>{
          return {
            text:item.name,
            value:item.id
          }
        })
        let schoolEducationLevels = result.data.data.schoolEducationLevels.map(item=>{
          return {
            text:item.name,
            value:item.id
          }
        })
        let schoolCollegeMajors = result.data.data.schoolCollegeMajors.map(item=>{
          return {
            text:item.name,
            value:item.id
          }
        })
        this.region_list = [{
          text: "全部",
          value: "all",
        },...schoolProvinces];
        this.hierarchy_list = [{
          text: "全部",
          value: "all",
        },...schoolEducationLevels];
        this.type_list = [{
          text: "全部",
          value: "all",
        },...schoolCollegeMajors];
      } else {
        
      }
      this.SET_IS_LOADING(false);
    },
  }
};
</script>
<style lang="scss" scoped>
.page-school {
  width: 100%;
  background: #ffffff;
  .school_container {
    width: 1200px;
    margin: 0 auto;
    .header-wrapper {
      line-height: 80px;
      font-size: 30px;
      letter-spacing: 2px;
      color: var(--theme-color);
      &.ch-simple{
        border-bottom: 2px solid var(--theme-color);
      }
    }
    .yxk-filter {
      position: relative;
      margin: 20px 0;
      padding: 0 15px;
      border: 1px solid #e5e5e5;
      .yxk-fliter-list {
        .yxk-option-con {
          padding: 4px 0;
          .list-th {
            width: 110px;
            padding-right: 0;
            text-align: left;
            font-weight: 700;
            font-size: 14px;
            position: relative;
            float: left;
            color: #666;
            line-height: 30px;
          }
          .list-td {
            width: 1056px;
            padding-left: 0;
            position: relative;
            float: left;
            font-size: 14px;
            .yxk-option {
              padding: 0;
              margin-right: 20px;
              cursor: pointer;
              line-height: 30px;
              &.selected {
                color: var(--theme-color);
                background: none;
                cursor: default;
                display: inline-block;
              }
            }
          }
        }
        .clearfix {
          zoom: 1;
          &::after {
            content: "";
            display: block;
            clear: both;
            height: 0;
          }
        }
      }
    }
    .yxk-list{
      width: 100%;
      border: 1px solid #e5e5e5;
      .yxk-school-item{
        display: flex;
        width: 100%;
        height: 120px;
        border-bottom: 1px solid #e5e5e5;
        &:last-child{
          border-bottom: none;
        }
        .school-logo{
          width: 120px;
          height: 120px;
          display: flex;
          align-items: center;
          justify-content: center;
          img{
            width: 80px;
            height: 80px;
            display: block;
            background: var(--theme-color);
          }
        }
        .school-info{
          width: 1000px;
          padding: 18px 10px 18px 0;
          font-size: 14px;
          box-sizing: border-box;

          display: flex;
          flex-wrap: wrap;
          flex-direction: column;
          justify-content: center;
          .school-info-title{
            margin-bottom: 10px;
            font-size: 16px;
          }
          .school-info-introduction{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
          }
        }
        .school-detail{
          width: 80px;
          height: 100%;
          font-size: 16px;
          text-align: center;
          color: var(--theme-color);
          line-height: 120px;
          >a{
            color: var(--theme-color);
          }
        }
      }
    }
    .yxk-footer{
      margin: 30px 0;
      text-align: center;
    }
  }
}
</style>
